<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧选项</title>
</head>

<style>
    html, body{
        padding:0px;
        margin:0px;
        font-family: 'Raleway', sans-serif;
        color:#FFF;
        height:100%;
    }
    body{
        background:rgba(0, 0, 0, 0.5);
    }

    .container{
      /*  max-width:200px;*/
        background:rgba(0, 0, 0, 0.75);
        margin:0px;
        padding:0px;
        border:1px solid #111;
        border-radius:4px;
        box-shadow:0px 4px 5px rgba(0, 0, 0, 0.75);
        height:100%;
    }
    .link{
        font-size:16px;
        font-weight:400;
        text-align:center;
        position:relative;
        height:60px;
        line-height:60px;
        margin-top:10px;
        overflow:hidden;
        width:90%;
        margin-left:5%;
        cursor:pointer;
    }
    .link:after{
        content: '';
        position:absolute;
        width:80%;
        border-bottom:1px solid rgba(255, 255, 255, 0.5);
        bottom:50%;
        left:-100%;
        transition-delay: all 0.5s;
        transition: all 0.5s;
    }
    .link:hover:after,
    .link.hover:after{
        left:100%;
    }
    .link .text{
        text-shadow:0px -40px 0px rgba(255, 255, 255, 1);
        transition:all 0.75s;
        transform:translateY(100%) translateZ(0);
        transition-delay:all 0.25s;
    }
    .link:hover .text,
    .link.hover .text{
        text-shadow:0px -40px 0px rgba(255, 255, 255, 0);
        transform:translateY(0%) translateZ(0) scale(1.1);
        font-weight:600;
    }
    a {
        color:#FFFFFF;
        text-decoration:none;
    }

    a:hover {
        color:#FFFFFF;
        text-decoration:none;
    }
    html,body {
        margin:0;
        padding:0;
    }

</style>

<script>
    //For Demo only
    var links = document.getElementsByClassName('link')
    for(var i = 0; i <= links.length; i++)
        addClass(i)


    function addClass(id){
        setTimeout(function(){
            if(id > 0) links[id-1].classList.remove('hover')
            links[id].classList.add('hover')
        }, id*750)
    }
</script>



<body  style= "margin:0;">



    <div class="container">
        <div class="link">
            <div class="text">首页</div>
        </div>
        <div class="link">
            <div class="text"> <a href='go_to_projectManger' target='show'>项目管理</a></div>
        </div>
        <div class="link">
            <div class="text"> <a href='go_to_scheduleQuery' target='show'>进度查询</a></div>
        </div>
        <div class="link">
            <div class="text"><a href='go_to_inspect' target='show'>检测查询</a></div>
        </div>
        <div class="link">
            <div class="text"><a href='go_to_employee_statistics' target='show'>合格率统计</a></div>
        </div>
        <div class="link">
            <div class="text"><a href='go_to_warehouse_statistics' target='show'>仓库统计</a></div>
        </div>
        <div class="link">
            <div class="text">联系我们</div>
        </div>
    </div>


</body>
</html>